<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="$router.go(-1)"></top-nav-bar>
    <!-- <div style=""> -->
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员:">
                <a-input
                  v-model="keywords"
                  placeholder="请输入学员姓名/手机号(回车搜索)"
                  @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%"
                >
                  <a-tooltip slot="suffix" title="请输入学员姓名/手机号">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索订单号:">
                <a-input
                  v-model="orderNo"
                  placeholder="请输入订单号(回车搜索)"
                  @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%"
                >
                  <a-tooltip slot="suffix" title="请输入订单号">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="报读课程:">
                <a-select v-model="queryParam.course_id" placeholder="请选择课程" allowClear style="width: 80%">
                  <a-select-option v-for="(item, index) in courseList" :key="index" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24" style="position: relative">
                <a-form-item label="剩余数量:">
                  <a-input
                    placeholder="请选择剩余数量"
                    :value="surplusNumber"
                    style="width: 80%"
                    readonly
                    @click="isShowSurplus = true"
                  />
                </a-form-item>
                <div class="surplus-number" v-if="isShowSurplus">
                  <div class="title-box">
                    <div>
                      <div style="margin-bottom: 12px">最小值:</div>
                      <a-input-number v-model="min_surplus" />
                      <span style="padding: 0 5px">~ </span>
                    </div>

                    <div>
                      <div style="margin-bottom: 12px">最大值:</div>
                      <a-input-number v-model="max_surplus" />
                    </div>
                  </div>
                  <div class="foot">
                    <a-button @click="isShowSurplus = false">取消</a-button>
                    <a-button @click="surplusSure">确定</a-button>
                  </div>
                </div>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="经办日期:">
                  <a-range-picker @change="expireChange" />
                </a-form-item>
              </a-col>
            </template>
          </a-row>
        </a-form>
        <a style="cursor: pointer" v-if="advanced" @click="advanced = !advanced" id="moreButton">
          收起
          <a-icon type="up"></a-icon>
        </a>
        <a style="cursor: pointer" v-if="!advanced" @click="advanced = !advanced" id="moreButton">
          展开
          <a-icon type="down"></a-icon>
        </a>
      </div>
      <s-table
        ref="table"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        showPagination="auto"
        class="user_management_table"
        :scroll="{ x: 1300 }"
      >
        <!-- 经办日期 -->
        <span slot="purchase_at" slot-scope="text, record">
          {{ record.order.purchase_at | dayjs }}
        </span>
        <!-- 购买数量 -->
        <span slot="buy_number" slot-scope="text, record">
          {{ record.price_type == 1 ? record.buy_number + '课时' : record.buy_number + '天' }}
        </span>
        <span slot="give_number" slot-scope="text, record">
          {{ record.price_type == 1 ? record.give_number + '课时' : record.give_number + '天' }}
        </span>
        <!-- 已消耗数量 -->
        <span slot="consume_number" slot-scope="text, record">
          {{ Number(record.buy_number) + Number(record.give_number) - record.surplus_number }}
          <span v-if="record.price_type == 1">课时</span>
          <span v-else>天</span>
        </span>
        <span slot="refund_number" slot-scope="text, record">
          {{ record.price_type == 1 ? record.refund_number + '课时' : record.refund_number + '天' }}
        </span>
        <span slot="surplus_number" slot-scope="text, record">
          {{ record.price_type == 1 ? record.surplus_number + '课时' : record.surplus_number + '天' }}
        </span>
      </s-table>
    </a-card>
    <!-- </div> -->
    <div style="padding-bottom: 80px"></div>
    <div class="foot-box">
      <a-button type="primary" class="ml12" @click="classHourClear">确定</a-button>
      <a-button @click="$router.go(-1)">取消</a-button>
    </div>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { coursesList } from '@/api/courseCharge'
import { STable, Ellipsis } from '@/components'
import { surplusHour, batchClassHourClearing } from '@/api/student'
export default {
  components: {
    topNavBar,
    STable,
    Ellipsis,
  },
  data() {
    return {
      surplusNumber:'',
      isShowSurplus:false,
      min_surplus:null,
      max_surplus:null,
      nowRouteTitle: '',
      keywords: '',
      orderNo: '',
      courseList: [],
      advanced: false,
      queryParam: {
        school_id: this.$store.state.user.school,
      },
      selectedRowKeys: [],
      selectedRows: [],
      rowSelection: {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      },
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'orderStudent.name',
          width: 200,
          fixed: 'left'
          // scopedSlots: { customRender: 'student_name' },
        },
        {
          title: '报读课程',
          dataIndex: 'project.name',
          width: 200,
          fixed: 'left',
          // scopedSlots: { customRender: 'student_name' },
        },
        {
          title: '订单号',
          dataIndex: 'order.order_no',
          width: 300,
          // scopedSlots: { customRender: 'student_name' },
        },
        {
          title: '经办日期',
          // dataIndex: 'student_name',
          width: 200,
          scopedSlots: { customRender: 'purchase_at' },
        },
        {
          title: '购买数量',
          // dataIndex: 'buy_number',
          width: 200,
          scopedSlots: { customRender: 'buy_number' },
        },
        {
          title: '赠送数量',
          // dataIndex: 'give_number',
          width: 200,
          scopedSlots: { customRender: 'give_number' },
        },
        {
          title: '已消耗数量',
          // dataIndex: 'import_number',
          width: 200,
          scopedSlots: { customRender: 'consume_number' },
        },
        {
          title: '退转数量',
          // dataIndex: 'refund_number',
          width: 200,
          scopedSlots: { customRender: 'refund_number' },
        },
        {
          title: '剩余数量',
          // dataIndex: 'surplus_number',
          width: 150,
          // align: 'right',
          scopedSlots: { customRender: 'surplus_number' },
        },
      ],
      loadData: (parameter) => {
        return surplusHour(
          Object.assign(parameter, this.queryParam, { keywords: this.keywords, order_no: this.orderNo,min_surplus:this.min_surplus,max_surplus:this.max_surplus  })
        ).then((res) => {
          return res
        })
      },
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh(true)
        this.sumNumber()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true, // 开启深度监听，默认是false
    },
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.getCourseList()
  },
  methods: {
    surplusSure(){
      if(this.min_surplus==null||this.max_surplus==null){
          this.$message.warning('请输入最大值或者最小值')
          this.min_surplus=''
          this.max_surplus=''
          this.surplusNumber=''
          return
      }
      else{
        this.$refs.table.refresh(true)
        this.sumNumber()
        this.surplusNumber=this.min_surplus+'~'+this.max_surplus
      
      }
       this.isShowSurplus=false
    },
    getCourseList() {
      coursesList({ school_id: this.queryParam.school_id, pageSize: 999999 })
        .then((res) => {
          this.courseList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取课程列表失败，请稍后重试')
        })
    },
    expireChange(date, dateString) {
      this.queryParam.purchase_start_at = dateString[0]
      this.queryParam.purchase_end_at = dateString[1]
      this.$refs.table.refresh(true)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    classHourClear() {
      if (this.selectedRows.length == 0) {
        this.$message.warning('请选择要课时清零的学员')
        return
      }
      let parmars = []
      this.selectedRows.forEach((item) => {
        parmars.push({
          order_content_id: item.id,
          course_id: item.project.id,
          student_id: item.orderStudent.id,
        })
      })
      let that = this
      this.$confirm({
        title: '确认课时清零吗?',
        content: `你正在对${that.selectedRows.length}条课程报读明细进行课时清零操作。清零后，所有剩余课时/天数将自动消耗，这些课时/天数不能恢复`,
        okText: '确认清零',
        cancelText: '取消',
        onOk() {
          batchClassHourClearing({ data: parmars })
            .then((res) => {
              that.$message.success('课时清零成功')
              that.$router.go(-1)
            })
            .catch((error) => {
              that.$message.error(err.data.message || '课时清零失败，请稍后重试')
            })
        },
        onCancel() {
          that.selectedRowKeys = []
          that.selectedRows = []
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.table-page-search-wrapper {
  margin-top: 30px;
  position: relative;
}
#moreButton {
  position: absolute;
  right: 0;
  top: 5px;
}
.foot-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  line-height: 48px;
  background: #fff;
  padding: 10px 48px;
  display: flex;
  flex-direction: row-reverse;
}
.ml12 {
  margin-left: 12px;
}
.surplus-number{
  width: 250px;
  height: 176px;
  background: #fff;
  position: absolute;
  top: 35px;
  left: 102px;
  z-index: 99;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  box-sizing: border-box;
  .title-box{
    padding:20px; 
    display: flex;
    height: 125px;
    box-sizing: border-box;
  }
  .foot{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 0 20px;
    border-top:1px solid #e8e8e8;
  }
}
</style>